<template>
  <div class="articles-container">
    <el-card class="box-card">
      <div class="clearfix">
        <div class="carheader">
          <div>
            <el-form label-width="80px" size="small" :inline="true">
              <el-form-item label="关键字">
                <el-input
                  style="200px"
                  v-model="form.keyword"
                  placeholder="根据文章标题搜索"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="form.state">
                  <el-option :value="1" label="启用"></el-option>
                  <el-option :value="0" label="禁用"></el-option>
                </el-select>
              </el-form-item>
              <el-button size="small" @click="clearInput()">清除</el-button>
              <el-button type="primary" size="small" @click="searchInput()"
                >搜索</el-button
              >
              <el-button
                style="float: right"
                type="success"
                size="small"
                icon="el-icon-edit"
                @click="NewQuestions"
                >新增试题</el-button
              >
            </el-form>
          </div>
        </div>
        <el-alert
          style="margin-bottom: 15px"
          :title="`数据一共 ${total} 条`"
          type="info"
          show-icon
        >
        </el-alert>

        <el-table :data="items" style="width: 100%">
          <el-table-column prop="id" label="序号" width="80"> </el-table-column>
          <el-table-column prop="title" label="文章标题" width="400">
            <template slot-scope="scope">
            {{scope.row.title}}
            <a @click.prevent="openVideo(scope.row.videoURL)" v-if="scope.row.videoURL" href="#" class="el-icon-video-camera-solid"></a>
          </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column prop="createTime" label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.createTime | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="preview(scope.row)"
                >预览</el-button
              >
              <el-button type="text" @click="using(scope.row)">{{
                scope.row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                @click="modification(scope.row)"
                :disabled="scope.row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="remove(scope.row)"
                :disabled="scope.row.state === 1 || scope.row.totals > 0"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 预览弹窗 -->
    <articles-preview
      :data="questionInfo"
      :isShowDialog="isShowDialog"
      @closeDialog="closeDialog"
    ></articles-preview>

    <!-- 新增试题 -->
    <el-dialog title="新增文章" :visible.sync="isShowquestions" width="800px">
      
      <el-form ref="form" :model="newForm" label-width="80px" :rules="formRules">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="newForm.title" placeholder="请输入文章标签"></el-input>
      </el-form-item>
      <el-form-item class="wznr" label="文章内容" prop="articleBody">
         <quill-editor style="height:200px" v-model="newForm.articleBody" :options="editorOptions"></quill-editor>
      </el-form-item>
      <div></div>
      <el-form-item style="margin-top:75px" label="视频地址">
        <el-input v-model="newForm.videoURL" placeholder="请输入视频地址"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowquestions = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(form)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list as articlelist, changeState, remove,add,update } from "@/api/hmmm/articles";
import ArticlesPreview from "../components/articles-preview.vue";
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    ArticlesPreview,
    quillEditor
  },
  data() {
    return {
      total: 2,
      form: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10,
      },
      items: null,
      isShowDialog: false,
      questionInfo: null,
      isShowquestions: false,
      newForm:{
        id:null,
        title:null,
        articleBody:null,
        videoURL:null
      },
      formRules: {
        title: [
          { required: true, message: '请输入文章标题', tirgger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', tirgger: 'blur' }
        ]
      },
      editorOptions: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      },
      judgeID: null
    };
  },
  created() {
    this.getartcilelist();
  },
  methods: {
    async getartcilelist() {
      const { data } = await articlelist(this.form);
      // console.log(data);
      this.items = data.items;
      this.total = data.counts;
    },
    // 顶部搜索
    searchInput() {
      this.form.page = 1;
      this.getartcilelist();
    },
    // 顶部清除
    clearInput() {
      this.form.keyword = null;
      this.form.state = null;
    },
    // 监听 每页显示多少条
    handleSizeChange(size) {
      this.form.page = 1;
      this.form.pagesize = size;
      this.getartcilelist();
    },
    // 监听当前第几页
    handleCurrentChange(np) {
      this.form.page = np;
      this.getartcilelist();
    },
    // 预览
    preview(questionInfo) {
      this.questionInfo = questionInfo;
      this.isShowDialog = true;
    },
    // 关闭弹窗
    closeDialog() {
      this.isShowDialog = false;
    },
    // 禁用启用
    async using(val) {
      await changeState({ id: val.id, state: val.state === 1 ? 0 : 1 });
      val.state = val.state === 1 ? 0 : 1;
    },
    // 修改
    modification(val) {
      if(val){
        this.newForm.id = val.id
        this.newForm.title = val.title
        this.newForm.articleBody = val.articleBody
        this.newForm.videoURL = val.videoURL
        this.judgeID = val.id
        this.isShowquestions = true
      }
    },
    // 删除
    async remove(val) {
      await remove({ id: val.id });
      this.$message.success("删除成功");
      this.getartcilelist();
    },
    // 新增试题
    NewQuestions() {
      this.judgeID = null
      this.newForm = {
        id:null,
        title:null,
        articleBody:null,
        videoURL:null
      }
      this.isShowquestions = true;
    },
    submitForm() {
       this.$refs.form.validate(async valid => {
        if (valid) {
              if(this.judgeID == null) {
                add(this.newForm)
              } else {
                update(this.newForm)
              }
      }
      // this.form.page = 1;
      this.isShowquestions = false
      })
      setTimeout(()=>{
        this.getartcilelist()
      },200)
    }
  },
};
</script>

<style lang="less" scoped>
.articles-container {
  padding: 10px;
  .carheader {
    height: 30px;
    margin-bottom: 15px;
  }
  .el-pagination {
    float: right;
    margin: 20px;
  }
  .el-icon-video-camera-solid{
    color: rgb(174, 6, 216);
    font-size: 18px;
  }
}

</style>